<template>
    <div class="city">
        <!-- 搜索框 -->
        <van-search 
            v-model="searchValue" 
            placeholder="城市/区域/位置"
            shape="round"
            show-action
            @cancel="cancelClick"
        />
        <!-- tab栏 -->
        <van-tabs v-model:active="tabActive" color="#ff9854" line-height="3">
            <!-- <van-tab :title="allCities?.cityGroup?.title">内容----1</van-tab>
            <van-tab :title="allCities?.cityGroupOverSea?.title">内容----2</van-tab> -->
            <van-tab 
                v-for="(value, key, index) in allCities"
                :key="key"
                :title="value.title"
                :name="key">
            </van-tab>
        </van-tabs>
        <!-- 内容区 -->
        <div class="content">
            <!-- <template v-for="(item, index) in currentGroup?.cities">
                {{item}}
            </template> -->
            <!-- 索引栏 -->
            <template v-for="(value, key, index) in allCities">
                <CityGroup v-show="tabActive === key" :currentGroup="value"></CityGroup>
            </template>
        </div>
    </div>
</template>

<script setup>
import { ref, computed } from "vue"
import { useRouter } from "vue-router"
import useCityStore from '@/stores/modules/city.js';
import { storeToRefs } from 'pinia';
import CityGroup from "./components/cityGroup.vue"

const router = useRouter()

// 搜索框
const searchValue = ref('')
const cancelClick = () => {
    router.back()
}


// tab栏
const tabActive = ref(0)
// getCityAll().then(res => {
//     console.log(res)
// })
// store中获取数据
const cityStore = useCityStore()
cityStore.getCityAllData()
const {allCities} = storeToRefs(cityStore)
console.log(allCities)

// 目的: 获取选中标签后的数据
// 1.获取正确的key: 将tabs中绑定的tabAction正确绑定
// 2.根据key从allCities获取数据, 默认直接获取的数据不是响应式的, 所以必须包裹computed
// const currentGroup = computed(() => allCities.value[tabActive.value])


</script>

<style lang="less" scoped>
.content{
    height: calc(100vh - 98px);
    overflow-y: auto;
    margin-top: 2px;
}
</style>